<template>
    <div class="container">
        <Card shadow>
            <h2 style="text-align: center;color: #17233d;">{{ title }}</h2>
            <Divider style="margin: 15px 0;"/>
            <Row>
                <Col style="padding-left: 15px;">
                    <Tooltip content="导出为Excel" placement="top">
                        <Button class="export-btn" :size="btnSize">
                            <font-awesome-icon icon="file-excel"/>
                        </Button>
                    </Tooltip>
                    <Divider type="vertical"/>
                    <Tooltip content="发布" placement="top">
                        <Button class="publish-btn" :size="btnSize">
                            <font-awesome-icon icon="paper-plane"/>
                        </Button>
                    </Tooltip>
                    <Divider type="vertical"/>
                    <Tooltip content="隐藏" placement="top">
                        <Button class="hide-btn" :size="btnSize">
                            <font-awesome-icon icon="eye-slash"/>
                        </Button>
                    </Tooltip>
                    <Divider type="vertical"/>
                    <Tooltip v-if="displayExpandBtn" content="全部展开" placement="top">
                        <Button class="expand-btn" :size="btnSize" @click="expandAll">
                            <font-awesome-icon icon="expand"/>
                        </Button>
                    </Tooltip>
                    <Tooltip v-else content="全部折叠" placement="top">
                        <Button class="compress-btn" :size="btnSize" @click="compressAll">
                            <font-awesome-icon icon="compress"/>
                        </Button>
                    </Tooltip>
                    <Divider type="vertical"/>
                    <Tooltip :content="currDay" placement="top">
                        <Button class="calendar-alt-btn" :size="btnSize" @click="expandCurr">
                            <font-awesome-icon icon="calendar-alt"/>
                        </Button>
                    </Tooltip>
                </Col>
            </Row>
            <br>
            <Row>
                <Col>
                    <div class="schedule-collapse-table-container">
                        <!--<custom-scroll :ops="ops">-->
                        <schedule-collapse ref="scheduleCollapse"></schedule-collapse>
                        <!--</custom-scroll>-->
                    </div>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
import ScheduleCollapse from '_c/schedule-collapse'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faFileExcel,
  faPaperPlane,
  faEyeSlash,
  faExpand,
  faCompress,
  faCalendarAlt
} from '@fortawesome/free-solid-svg-icons'
import { currDay } from '@/libs/tools'

library.add(faFileExcel)
library.add(faPaperPlane)
library.add(faEyeSlash)
library.add(faExpand)
library.add(faCompress)
library.add(faCalendarAlt)

export default {
  components: {
    // 使用 key: value 的形式注册 value 组件，并命名为 key
    'schedule-collapse': ScheduleCollapse
  },
  data () {
    return {
      title: '2018 ~ 2019学年第一学期总体安排表',
      btnSize: 'small',
      displayExpandBtn: true,
      currDay: '只看星期' + '天一二三四五六'.charAt(new Date().getDay())
    }
  },
  methods: {
    expandAll () {
      let weekDayArr = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
      let length = weekDayArr.length
      let i = 0
      this.$Spin.show()
      let timer = setInterval(() => {
        if (i < length) {
          this.$refs.scheduleCollapse.currExpanded.push(weekDayArr[i])
          i++
        } else {
          this.$Spin.hide()
          clearInterval(timer)
        }
      }, 160)
      this.displayExpandBtn = false
    },
    compressAll () {
      this.$Spin.show()
      let timer = setInterval(() => {
        if (this.$refs.scheduleCollapse.currExpanded.length > 0) {
          this.$refs.scheduleCollapse.currExpanded.pop()
        } else {
          this.$Spin.hide()
          clearInterval(timer)
        }
      }, 120)
      this.displayExpandBtn = true
    },
    expandCurr () {
      this.$refs.scheduleCollapse.currExpanded = [currDay()]
      this.displayExpandBtn = false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$children[0].$el.children[0].style.minHeight = this.$parent.$el.clientHeight - 36 + 'px'
      window.addEventListener('resize', () => {
        this.$children[0].$el.children[0].style.minHeight = this.$parent.$el.clientHeight - 36 + 'px'
      }, false)
    })
  },
  destroyed () {
    window.removeEventListener('resize', () => {
      this.$children[0].$el.children[0].style.minHeight = this.$parent.$el.clientHeight - 36 + 'px'
    }, false)
  }
}
</script>

<style lang="less">
    @import 'schedule-collapse.less';
</style>
